<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script>
</head>

<body>
    <div id="app">
      {{msg}} <br>
      <p id="myP">123</p>
    </div>
    <script>
        const {ref} =Vue
        const app = Vue.createApp({
            setup(props) {
                console.log('我是setup');
                const type =ref('a')
                return {
                    type,
                    
                }
            },
            data() {
                return {
                    msg:'vue选项式的生命周期'
                }
            },
            beforeCreate() {
                console.log('---beforeCreate---');
                let a=document.getElementById('myP');
                console.log(a);
                console.log(this.msg);//undefined
            },
            created() {
                console.log('---created---');
                let a=document.getElementById('myP');
                console.log(this.msg);//vue选项式的生命周期 ,后端API提供的数据一般在这个钩子函数进行赋值
                console.log(a);
            },
            beforeMount() {
                console.log('---beforeMount---');
                let a=document.getElementById('myP');
                console.log(this.msg);
                console.log(a);
            },
            mounted() {
                console.log('---mounted---');
                let a=document.getElementById('myP');
                console.log(this.msg);
                console.log(a);
                throw new Error('err')
            },
            beforeUpdate() {
                console.log('---beforeUpdate---');
            },
            updated() {
                console.log('---updated---');
            },
            beforeUnmount() {
                console.log('---beforeUnmount---');
            },
            unmounted() {
                console.log('---unmounted---');
            },
        })
        app.config.errorHandler = (err, vm, info) => {
            // handle error
            console.log(err);
            console.log(vm);
            console.log(info);
        }
        app.mount("#app");
  
    </script>
</body>

</html>